<template>
	<div class="mt-2">
		<div class="flex items-center text-t-3">
			<base-icon name="data" size="20"></base-icon>
			<div class="ml-1">{{ $t('slotsProfile.title') }}</div>
		</div>
		<div class="mt-2 grid gap-2 grid-cols-2">
			<up-stats-item
				img="slots/profile/count"
				title-t="slotsProfile.bettingCount"
				:value="slotsBetCount"></up-stats-item>
			<up-stats-item
				img="slots/profile/totalAmount"
				title-t="slotsProfile.betAmount"
				:value="slotsBetAmount"
				type="amount"></up-stats-item>
			<up-stats-item
				img="slots/profile/winCount"
				title-t="slotsProfile.winCount"
				:value="slotsWinCount"></up-stats-item>
			<up-stats-item
				img="slots/profile/maxWin"
				title-t="slotsProfile.maxPayout"
				:value="slotsMaxPayout"
				type="amount"></up-stats-item>
			<up-stats-item
				img="slots/profile/avgWin"
				title-t="slotsProfile.avgWinAmount"
				:value="slotsAverageWinAmount"
				type="amount"></up-stats-item>
			<up-stats-item
				img="slots/profile/avgAmount"
				title-t="slotsProfile.avgBetAmount"
				:value="slotsAverageBetAmount"
				type="amount"></up-stats-item>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, Ref, inject, watch } from 'vue'
import { BaseIcon } from '@/components/base'
import { UpStatsItem } from '@/components/up'
import { getSlotsStatistic } from '@/api/slots'

// const isMe = inject<Ref<boolean>>('isMe')

const userId = inject<Ref<string>>('userId')

const slotsBetCount = ref()
const slotsBetAmount = ref()
const slotsWinCount = ref()
const slotsMaxPayout = ref()
const slotsAverageBetAmount = ref()
const slotsAverageWinAmount = ref()

const getStatisticData = async () => {
	try {
		const { data } = await getSlotsStatistic({
			userId: userId!.value
		})
		const { betCount, betAmount, winCount, maxPayout, averageWinAmount, averageBetAmount } = data
		slotsBetCount.value = betCount || 0
		slotsBetAmount.value = betAmount || 0
		slotsWinCount.value = winCount || 0
		slotsMaxPayout.value = maxPayout || 0
		slotsAverageWinAmount.value = averageWinAmount || 0
		slotsAverageBetAmount.value = averageBetAmount || 0
	} catch (error) {}
}

// getStatisticData()

watch(
	() => userId?.value,
	() => {
		if (userId?.value) {
			getStatisticData()
		}
	},
	{
		immediate: true
	}
)
</script>
